<template>
	<view class="browse">
		<!-- 首页浏览区部分 -->
		<view class="browsebox">
			<!-- <navigator url="/pages/navPage/navPage" class="box" v-for="item in 5">
				<image src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRFxnP5gl5k0l_OWGMfAfprXNrPsxrme3vk4A&s" mode="aspectFill"></image>
				<view class="text">谁能帮帮我拿快递啊~ </view>
				<view class="userinfo">
					<image class="usrimg" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTTREs8xjjeSDboZon7rhzR9nPDUU_1-__XJPlmrvRa-pV8tOE3XvbupmOaoA&s" mode="aspectFill"></image>
					<view class="username">爱吃香菜的肉包</view>
				</view>
			</navigator> -->
			<!-- 第一个 -->
			
				<navigator v-if="prop.boxnumber==1" @click="changeimg" :randomImages="randomImages"
				:url="'/pages/navPage/navPage?userimg='+usrimg1+'&username='+encodeURIComponent(username1)+'&array='+encodeURIComponent(randomImages)" class="box" :username="username1" :userimg="usrimg1">
					<image src="/common/Otherimages/images5.jpg" mode="aspectFill"></image>
					<view class="text">谁能帮帮我拿快递啊~ </view>
					<view class="userinfo">
						<image class="usrimg" src="/common/Otherimages/u6.jpg" mode="aspectFill"></image>
						<view class="username">{{username1}}</view>
					</view>
				</navigator>
				<!-- 第2个 -->
				<navigator v-if="prop.boxnumber==1" @click="changeimg"
				:url="'/pages/navPage/navPage?userimg='+usrimg2+'&username='+encodeURIComponent(username2)" class="box" :username="username2" :userimg="usrimg2">
					<image src="/common/Otherimages/c21.jpg" mode="aspectFill"></image>
					<view class="text">有没有无人机小哥帮忙配送一下</view>
					<view class="userinfo">
						<image class="usrimg" src="/common/usrimg/1.jpg" mode="aspectFill"></image>
						<view class="username">{{username2}}</view>
					</view>
				</navigator>  
				<!-- 第3个 -->
				<navigator v-if="prop.boxnumber==1 || prop.boxnumber==5"
				:url="'/pages/navPage/navPage?userimg='+usrimg3+'&username='+encodeURIComponent(username3)" class="box" :username="username3" :userimg="usrimg3">
					<image src="/common/Otherimages/34.jpg" mode="aspectFill"></image>
					<view class="text">我这快递不重的，拿起来非常方便 </view>
					<view class="userinfo">
						<image class="usrimg" src="/common/usrimg/2.jpg" mode="aspectFill"></image>
						<view class="username">{{username3}}</view>
					</view>
				</navigator>
				<!-- 第4个 -->
				<navigator v-if="prop.boxnumber==2 || prop.boxnumber==5"
				:url="'/pages/navPage/navPage?userimg='+usrimg4+'&username='+encodeURIComponent(username4)" class="box" :username="username4" :userimg="usrimg4">
					<image src="/common/goods/77.jpg" mode="aspectFill"></image>
					<view class="text">我喜欢无人车送来的</view>
					<view class="userinfo">
						<image class="usrimg" src="/common/usrimg/3.jpg" mode="aspectFill"></image>
						<view class="username">{{username4}}</view>
					</view>
				</navigator>
				<!-- 第5个 -->
				<navigator v-if="prop.boxnumber==2"
				:url="'/pages/navPage/navPage?userimg='+usrimg5+'&username='+encodeURIComponent(username5)" class="box" :username="username5" :userimg="usrimg5">
					<image src="/common/goods/4.jpg" mode="aspectFill"></image>
					<view class="text">请帮我送到我家门口谢谢</view>
					<view class="userinfo">
						<image class="usrimg" src="/common/usrimg/5.jpg" mode="aspectFill"></image>
						<view class="username">{{username5}}</view>
					</view>
				</navigator>
				<!-- 第6个 -->
				<navigator v-if="prop.boxnumber==3 || prop.boxnumber==5"
				:url="'/pages/navPage/navPage?userimg='+usrimg6+'&username='+encodeURIComponent(username6)" class="box" :username="username6" :userimg="usrimg6">
					<image src="/common/goods/44.jpg" mode="aspectFill"></image>
					<view class="text">感谢无人机配送</view>
					<view class="userinfo">
						<image class="usrimg" src="/common/usrimg/8.jpg" mode="aspectFill"></image>
						<view class="username">{{username6}}</view>
					</view>
				</navigator>
				<!-- 第7个 -->
				<navigator v-if="prop.boxnumber==3"
				:url="'/pages/navPage/navPage?userimg='+usrimg7+'&username='+encodeURIComponent(username7)" class="box" :username="username7" :userimg="usrimg7">
					<image src="/common/goods/22.jpg" mode="aspectFill"></image>
					<view class="text">我想要无人车配送谢谢</view>
					<view class="userinfo">
						<image class="usrimg" src="/common/usrimg/11.jpg" mode="aspectFill"></image>
						<view class="username">{{username7}}</view>
					</view>
				</navigator>
				<!-- 第8个 -->
				<navigator v-if="prop.boxnumber==4 || prop.boxnumber==5"
				:url="'/pages/navPage/navPage?userimg='+usrimg8+'&username='+encodeURIComponent(username8)" class="box" :username="username8" :userimg="usrimg8">
					<image src="/common/goods/1.jpg" mode="aspectFill"></image>
					<view class="text">刚买的淘宝谢谢</view>
					<view class="userinfo">
						<image class="usrimg" src="/common/usrimg/13.jpg" mode="aspectFill"></image>
						<view class="username">{{username8}}</view>
					</view>
				</navigator>
				<!-- 第9个 -->
				<navigator v-if="prop.boxnumber==4  || prop.boxnumber==5"
				:url="'/pages/navPage/navPage?userimg='+usrimg9+'&username='+encodeURIComponent(username9)" class="box" :username="username9" :userimg="usrimg9">
					<image src="/common/goods/55.jpg" mode="aspectFill"></image>
					<view class="text">我想要无人机配送谢谢</view>
					<view class="userinfo">
						<image class="usrimg" src="/common/usrimg/56.jpg" mode="aspectFill"></image>
						<view class="username">{{username9}}</view>
					</view>
				</navigator>
				<!-- 第10个 -->
				<navigator v-if="prop.boxnumber==4 || prop.boxnumber==5"
				:url="'/pages/navPage/navPage?userimg='+usrimg10+'&username='+encodeURIComponent(username10)" class="box" :username="username10" :userimg="usrimg10">
					<image src="/common/goods/6.jpg" mode="aspectFill"></image>
					<view class="text">我刚买的芯片谁帮我送一下</view>
					<view class="userinfo">
						<image class="usrimg" src="/common/usrimg/67.jpg" mode="aspectFill"></image>
						<view class="username">{{username10}}</view>
					</view>
				</navigator>
				<!-- 第11个 -->
				<navigator v-if="prop.boxnumber==4"
				:url="'/pages/navPage/navPage?userimg='+usrimg11+'&username='+encodeURIComponent(username11)" class="box" :username="username11" :userimg="usrimg11">
					<image src="/common/goods/images.jpg" mode="aspectFill"></image>
					<view class="text">好多快递啊，有没有人帮我一下</view>
					<view class="userinfo">
						<image class="usrimg" src="/common/usrimg/u1.jpg" mode="aspectFill"></image>
						<view class="username">{{username11}}</view>
					</view>
				</navigator>
				<!-- 第12个 -->
				<navigator v-if="prop.boxnumber==3 || prop.boxnumber==5"
				:url="'/pages/navPage/navPage?userimg='+usrimg12+'&username='+encodeURIComponent(username12)" class="box" :username="username12" :userimg="usrimg12">
					<image src="/common/goods/images.jpg" mode="aspectFill"></image>
					<view class="text">好多快递啊，有没有人帮我一下</view>
					<view class="userinfo">
						<image class="usrimg" src="/common/usrimg/u4.jpg" mode="aspectFill"></image>
						<view class="username">{{username12}}</view>
					</view>
				</navigator>
				
				
				
			
			
			<!-- 刷新和返回顶部按钮 -->
			<view class="float">
				<view class="item" @click="refresh">刷新</view>
				<view class="item" @click="toTop">顶部</view>
			</view>
		</view>
		<!-- <view clas="tab">5分钟前更新</view> -->
	</view>
</template>

<script setup>
import {computed, ref,defineProps} from 'vue'
import {onReachBottom,onPullDownRefresh} from '@dcloudio/uni-app'
// 定义用户图片
const usrimg1=ref('/common/Otherimages/u6.jpg')
const usrimg2=ref('/common/usrimg/1.jpg')
const usrimg3=ref('/common/usrimg/2.jpg')
const usrimg4=ref('/common/usrimg/3.jpg') 
const usrimg5=ref('/common/usrimg/5.jpg')
const usrimg6=ref('/common/usrimg/8.jpg')
const usrimg7=ref('/common/usrimg/11.jpg')
const usrimg8=ref('/common/usrimg/13.jpg')
const usrimg9=ref('/common/usrimg/56.jpg')
const usrimg10=ref('/common/usrimg/67.jpg')
const usrimg11=ref('/common/usrimg/u1.jpg')
const usrimg12=ref('/common/usrimg/u4.jpg')
const username1=ref("小杜小杜最乖")

const username2=ref("爱吃香菜的肉包")
const username3=ref("你就是我的小豆包")
const username4=ref("可惜不是你")
const username5=ref("刘依然是个笑话")
const username6=ref("老酒鬼")
const username7=ref("蹦波霸")
const username8=ref("我想要无人车配送谢谢")
const username9=ref("感谢有你的存在")
const username10=ref("我是村长的儿子")
const username11=ref("我是小村长")
const username12=ref("我是原生")
const username13=ref("我不玩paly")
const username14=ref("就是小菜花")
const randomImages=ref([])
// 随机显示图片
const allImagePaths = [
  '/common/goods/1.jpg',
   '/common/goods/4.jpg',
    '/common/goods/5.jpg',
	 '/common/goods/6.jpg',
	  '/common/goods/22.jpg',
	   '/common/goods/33.jpg',
	    '/common/goods/55.jpg',
		 '/common/goods/77.jpg',
		  '/common/goods/images.jpg',
		   '/common/goods/images2.jpg',
		    '/common/goods/images3.jpg',
 
];

function getRandomImageBatch(allImagePaths, minBatchSize, maxBatchSize) {
  const randomBatch = [];
  let batchSize = Math.floor(Math.random() * (maxBatchSize - minBatchSize + 1)) + minBatchSize;

  while (randomBatch.length < batchSize && allImagePaths.length > 0) {
    const randomIndex = Math.floor(Math.random() * allImagePaths.length);
    const imagePath = allImagePaths[randomIndex];

    randomBatch.push(imagePath);
    allImagePaths.splice(randomIndex, 1);
  }

  return randomBatch;
}

// 当发生点击改变图片数组
const changeimg=()=>{
	 randomImages.value = getRandomImageBatch(allImagePaths, 2, 3);
	 console.log(randomImages);
}

// 接收父组件传送过来的值
const prop=defineProps({
	boxnumber:{
		type:Number,
		default:1
	}
})


// 实现刷新按钮功能
const refresh=()=>{
	uni.startPullDownRefresh();
	// 实现下拉刷新后隐藏刷新
	uni.stopPullDownRefresh()
}
// 实现顶部按钮
const toTop=()=>{
	uni.pageScrollTo({
		scrollTop:0,
		duration:100
		
	})
}
</script>

<style lang="scss" scoped>
.browse{
	.browsebox{
		padding:5rpx 70rpx;
		display:grid;
		grid-template-columns: repeat(2,1fr);
		grid-gap: 40rpx; /* 在两列之间添加间距 */
		
		// border:1rpx solid #000;
		// padding:30rpx; 
		.box{
			// position:relative;
			display:grid;
			grid-template-rows:60% 20% auto;
			
			// gap:10rpx;
			width: 280rpx;
			// height: 440rpx;
			height: 448rpx;
			border-radius: 30rpx;
			// background-color: rgba(0,0,0,0.5);
			box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
			image{
				width:100%;
				height:100%;
				border-radius: 30rpx;
			}
			.text{
				padding:10rpx;
				color: #000;
				// text-align: center;
				font-family: "Noto Sans SC";
				font-size: 25rpx;
				font-style: normal;
				font-weight: 400;
				line-height: normal;
			}
			.userinfo{
				padding:10rpx;
				display:grid;
				grid-template-columns: 25% auto;				
				// 用户头像
				.usrimg{
					width:55rpx;
					height: 55rpx;	
				}
				// 用户名称
				.username{	
					color: rgba(0, 0, 0, 0.7);
					// text-align: center;
					// text-shadow: 0px 4px 4.7px rgba(0, 0, 0, 0.25);
					font-family: "Noto Sans SC";
					font-size: 21rpx;
					font-style: normal;
					font-weight: 400;
					line-height: normal;
				}
			}
			// 定义tab样式
			.tab{
				
				position: absolute;
				left:0;
				top:0;
				background: rgba(250,129,90,0.7);
				backdrop-filter: blur(20rpx);
				color: #fff;
				font-size: 22rpx;;
				padding: 6rpx 14rpx;
				border-radius: 20rpx;
				transform: scale(0.8);
				transform-origin: left top;
			}
			

		}
	}
	// 定义刷新和返回顶部
	.float{
		position:fixed;
		right:30rpx;
		bottom:80rpx;
		padding-bottom:env(safe-area-insert-bottom);
		.item{
			width:100rpx;
			height:100rpx;
			// background-color: rgba(255,255,255,0.7);
			display:flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 30rpx;
			border-radius: 50%;
			// border:2rpx soild #000;
			// box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(0, 0, 0, 0.6);
			background: linear-gradient(190deg, rgba(255, 184, 252, 0.65) 5.64%, rgba(227, 193, 182, 0.78) 31.2%, rgba(239, 222, 159, 0.32) 63.73%, #FFBEBE 93.52%);
				box-shadow: 0px 6px 3.1px 0px rgba(255, 251, 251, 0.25) inset, 0px -2px 7.2px 0px rgba(0, 0, 0, 0.25) inset, 0px -6px 4.4px 0px rgba(255, 255, 255, 0.25) inset;
			animation: floatAnimation 1.5s ease-in-out infinite, colorChange 5s ease-in-out infinite alternate;
		}
	}
	
}
/* 定义动画 */
@keyframes floatAnimation {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10rpx);
	}
	100% {
		transform: translateY(0);
	}
}

@keyframes colorChange {
	0%, 100% {
		background: linear-gradient(190deg, rgba(239, 222, 159, 0.32) 5.64%, #FFBEBE 31.2%, rgba(255, 184, 252, 0.65) 63.73%, rgba(227, 193, 182, 0.78) 93.52%);
	}
	50% {
		background: linear-gradient(190deg, rgba(239, 222, 159, 0.32) 5.64%, #FFBEBE 31.2%, rgba(255, 184, 252, 0.65) 63.73%, rgba(227, 193, 182, 0.78) 93.52%);
	}
}
</style>